<template>
  <div class="container">
    <div class="container-top">
      <div class="top-name">轮播管理</div>
    </div>
    <div class="input_modal">
     <div class="modal-list last">
        <div class="input-item">
          <span class="name">广告类型：</span>
          <el-select
            v-model='adType'
            placeholder='-请选择-'
            style="height: 30px;  line-height: 30px;width:200px;"
          >
            <el-option
              v-for="item in typeArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              style="height: 30px;  line-height: 30px;width:120px;"
            ></el-option>
          </el-select>
        </div>
     </div>
      <div class="btns-top">
          <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="getList"
        >查询</el-button>
      </div>
        <div class="input_modal add">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-plus"
            @click="linkTo"
          >新增</el-button>
        </div>
    </div>
    <div class="table_con">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
      >
        <el-table-column
          prop="productCode"
          :formatter="formatter"
          label="广告类型"
        >  
            <template slot-scope="scope">
                {{scope.row.adType == 'OUTER_CHAIN'?'外链':"产品"}}
            </template>
        </el-table-column>
        <el-table-column
          prop="plateCode"
          label="轮播图片"
         
        >
          <template slot-scope="scope">
            <img
              style="width:120px;height:80px;"
              :src="scope.row.bannerImageUrl"
              alt=""
            >
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="操作"
          
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              class="el-icon-edit"
              @click="$router.push('/bannerEdit?id='+scope.row.id)"
            >编辑</el-button>
            <el-button
              type="danger"
              size="mini"
              class="el-icon-delete"
              @click="linkToDel(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        :page-sizes='[10,20,30,40]'
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageCount"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      modelList: [],
      adType:'',
      typeArr: [
        {
          name: "全部",
          id: ""
        },
        {
          name: "外链",
          id: "OUTER_CHAIN"
        },
        {
          name: "产品",
          id: "PRODUCT"
        }
      ],
      dateArr: [],
      sortArr: [],
      sortArr1: [],
      pageCount: null,
      pageIndex: 1,
      pageSize: 10,
      loading: true,
      productCodeLike: "",
      titleLike: "",
      productStatus: '',
      ids:[],
      statusList: [{
        id: 'SALE',
        name: '出售中'
      },{
        id: 'NOTSALE',
        name: '在仓库'
      },{
        id: 'SALEOUT',
        name: '售罄'
      }]
    };
  },
  mounted() {
    this.pageIndex = this.$router.currentRoute.query.pageIndex
      ? this.$router.currentRoute.query.pageIndex
      : 1;
    this.getList();
  },
  methods: {
    linkToDel(id) {
      this.$confirm(`确定删除?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url = CONSTANT.URL.LIST.bannerDelete;
          common.del(url, id, res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getList();
            } else {
              this.$message({
                type: "warning",
                message: res.data.errMsg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    formatter(row, column, cellValue) {
      return cellValue ? cellValue : "- -";
    },
    getList: function() {
      let url = CONSTANT.URL.LIST.bannerPage;
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        adType:this.adType
      };
      this.loading = true;
      common.post(url, data, res => {
        this.loading = false;
        this.tableData = res.data.bussData;
        this.pageCount = res.data.count;
      });
    },
    search: function(e) {
      if (e.keyCode == 13) {
        this.pageIndex = 1;
        this.getList();
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getList();
    },
    linkTo() {
      this.$router.push("bannerEdit");
    }
  },
  filters: {
  }
};
</script>
<style lang="scss" scoped>
 .table_con{
   .el-table{
     .el-table__row{
       a{
          cursor:pointer;
          color:#409EFF;
       }
     }
   }
 }
 .table-cate {
  font-size: 14px;
  color: #606266;
  width: 90%;
  margin-left: 8%;
  margin-bottom: 30px;
  .table-head {
    overflow: hidden;
    display: flex;
    background-color: #d1d1d1;
    color: #333;
    .head-list {
      flex: 1;
      float: left;
      text-align: center;
      height: 40px;
      line-height: 40px;
    }
  }
  .no-data{
    border: 1px solid #e1e1e1;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  .table-item {
    overflow: hidden;
    display: flex;
    background-color: #fff;
    color: #333;
    border: 1px solid #e1e1e1;
    .table-list {
      flex: 1;
      float: left;
      text-align: center;
      height: 50px;
      line-height: 50px;
      border-right: 1px solid #e1e1e1;
      .el-button{
        background: 0 0 !important;
        border:none;
      }
      .el-input {
        float: left;
        width: 90% !important;
        margin-left: 5%;
        input {
          width: 100% !important;
        }
      }
      &:last-child {
        border-right: 0;
      }
    }
  }
}
</style>
